<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>CalendarView — JavaScript Calendar Widget</title>
    <link rel="stylesheet" href="../stylesheets/calendarview.css">
    <style>
      body {
        font-family: Trebuchet MS;
      }
      div.dateField {
        width: 140px;
        padding: 6px;
        -webkit-border-radius: 6px;
        -moz-border-radius: 6px;
        color: #555;
        background-color: white;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
      }
      div#popupDateField:hover {
        background-color: #cde;
        cursor: pointer;
      }
    </style>
    <script src="../../prototype.js"></script>
    <script src="../datetimepicker.js"></script>
    <script>
      function setupCalendars() {
        // Embedded Calendar
        Calendar.setup(
          {
            dateField: 'embeddedDateField',
            parentElement: 'embeddedCalendar'
          }
        )

        // Popup Calendar
        Calendar.setup(
          {
            dateField: 'popupDateField',
            triggerElement: 'popupDateField'
          }
        )

        // Popup Calendar
        Calendar.setup(
          {
            dateField: 'mydate',
            triggerElement: 'myhref',
            timeMode: 1,
            timeStep: 30
          }
        )
      }

      Event.observe(window, 'load', function() { setupCalendars() })
    </script>
  </head>
  <body>

    <div style="float: left; width: 50%">
      <div style="height: 400px; background-color: #efefef; padding: 10px; -webkit-border-radius: 12px; -moz-border-radius: 12px; margin-right: 10px">
        <h3 style="text-align: center; background-color: white; -webkit-border-radius: 10px; -moz-border-radius: 10px; margin-top: 0px; margin-bottom: 20px; padding: 8px">
          Embedded Calendar
        </h3>
        <div id="embeddedExample" style="">
          <div id="embeddedCalendar" style="margin-left: auto; margin-right: auto">
          </div>
          <br />
          <div id="embeddedDateField" class="dateField">
            Select Date
          </div>
          <br />
        </div>
      </div>
    </div>
    <div style="float: right; width: 50%">
      <div style="height: 400px; background-color: #efefef; padding: 10px; -webkit-border-radius: 12px; -moz-border-radius: 12px; margin-left: 10px">
        <h3 style="text-align: center; background-color: white; -webkit-border-radius: 10px; -moz-border-radius: 10px; margin-top: 0px; margin-bottom: 20px; padding: 8px">
          Popup Calendar
        </h3>
        <div id="popupExample">
          <div id="popupDateField" class="dateField" style="margin-top: 160px">
            Show Calendar
          </div>
        </div>
      </div>
    </div>

    <div style="background: grey;">
    <input type="text" value="2009-04-04" name="mydate" id="mydate" />
    <a href="#" onclick="return false;" id="myhref">sranda</a>
    </div>
  </body>
</html>